<template>
  <view class="noteListItem" @longpress="handleLongPress">
    <view class="nli-title" @tap="view">
      <text>{{ props.data.title }}</text>
      <u-tag
        :text="props.data.classification.name"
        shape="square"
        size="mini"
      />
    </view>
    <view @tap="view" class="nli-content customHtml">
      <rich-text :nodes="props.data.content"></rich-text>
    </view>
    <view class="nli-time">
      <text>{{ props.data.dateTime }}</text>
      <u-icon name="more-dot-fill" size="28" @tap="toHandleMenu"></u-icon>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
// 定义props
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["handleMenu"]);

const view = () => {
  uni.vk.navigateTo({
    url: `/subPages/note/detailView?id=${props.data._id}&mode=view`,
  });
};

const toHandleMenu = () => {
  emit("handleMenu");
};
</script>

<style scoped lang="scss">
.noteListItem {
  width: 100%;
  margin-bottom: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: #fff;
  padding: 10px;
  .nli-title {
    color: $u-main-color;
    // font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .u-tag {
      margin-left: 5px;
    }
    text {
      flex: 1;
    }
  }
  .nli-content {
    color: $u-content-color;
    font-size: 0.9em;
    margin-bottom: 10px;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      z-index: 1;
    }
    :deep(rich-text) {
      img {
        max-width: 100%;
        height: 150px;
        object-fit: cover;
      }
    }
  }
  .nli-time {
    font-size: 0.8em;
    color: $u-tips-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding: 5px 2px 0px 2px;
    margin-top: 5px;
  }
}
</style>

<!-- <style>
.nli-content img {
  width: 100%;
  height: auto;
}
</style> -->
